<template>
    <view :style="{
        backgroundColor: params.bgcolor,
        margin: (params.margin_y * 2.2) + 'rpx ' + params.margin_x * 2.2 + 'rpx 0',
        padding: (params.padding_y * 2.2) + 'rpx ' + params.padding_x * 2.2 + 'rpx',
        zIndex: params.z_index
    }">
        <scroll-view scroll-x style="width: 100%; white-space: nowrap;">
            <view class="item-container">
                <view v-for="item in data" :key="item.id" class="item-wrapper"
                    :style="'width:' + getItemWidth(params.style)">
                    <view class="item">
                        <view class="image-container">
                            <image :src="item.pic" mode="aspectFill" @click="toDetail(item)" />
                            <view class="red-box">
                                <image :src="getRedBoxIcon(item.type)" />
                            </view>
                        </view>
                        <view v-if="params.showname == 1" class="text"
                            :style="'font-size:' + params.t_fontsize * 2.2 + 'rpx'">{{ item.name }}
                        </view>
                        <view class="icons">
                            <view class="icon-zhongcao"
                                v-if="params.show_author == 1 || params.show_author == 2 || params.show_author == 3">
                                <image v-if="params.show_author == 1 || params.show_author == 2" class="authorimg"
                                    :src="item.author_headimg" mode="aspectFill" :style="'width:' + params.headimg_x * 2.2
                                        + 'rpx;height:' + params.headimg_x * 2.2
                                        + 'rpx;border-radius:' + params.borderradius * 2.2 + 'rpx'" />
                                <view v-if="params.show_author == 1 || params.show_author == 3" class="authorname"
                                    :style="'font-size:' + params.nickname_x * 2.2 + 'rpx'"> {{
                                        item.author_nickname }}</view>
                            </view>

                            <view class="icon-heart" v-if="1 || params.show_thumbs == 1">
                                <view class="action-item" @tap="toggleLike(item)">
                                    <image v-if="item.is_thumb == 1" class="action-icon"
                                        :src="static_url + '/static/img/lt_like2.png'" mode="aspectFit" :style="'width:' + params.thumbsimg_x * 2.2
                                            + 'rpx;height:' + params.thumbsimg_x * 2.2
                                            + 'rpx'">
                                    </image>
                                    <image v-if="item.is_thumb == 0" class="action-icon" src="@/static/img/lt_like.png"
                                        mode="aspectFit" :style="'width:' + params.thumbsimg_x * 2.2
                                            + 'rpx;height:' + params.thumbsimg_x * 2.2
                                            + 'rpx'">
                                    </image>
                                </view>
                                <text :style="'font-size:' + params.thumbs_x * 2.2 + 'rpx'">{{ item.thumbs
                                    }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            static_url: app.globalData.static_url
        }
    },
    props: {
        params: {},
        data: {}
    },
    onLoad() {
    },
    methods: {
        getItemWidth(style) {
            switch (style) {
                case 'two_line':
                    return '50%';
                case 'three_line':
                    return '33%';
                default:
                    return '50%';
            }
        },
        getRedBoxIcon(type) {
            return '/static/img/video.png';
        },
        toDetail(item) {
            app.goto(`/pagesZone/video/video_detail?id=${item.video_center_list_id}&listid=${item.video_id}`)
        },
        toggleLike(item) {
            let that = this;
            // let i = that.data.find(c => c.id == item.id)
            // if (i) {
            //     i.thumbs += 1;
            // }
            // console.log(i, that.data, item)

            if (item.is_thumb == 1) {
                if (item.thumbs > 0) {
                    item.thumbs -= 1;
                }
                item.is_thumb = 0;
            } else if (item.is_thumb == 0) {
                item.thumbs += 1;
                item.is_thumb = 1;
            }
            // return;

            // that.isLiked = !that.isLiked;
            app.post('VideoCenter/thumbSet', { video_center_content_id: item.video_id, type: item.is_thumb == 0 ? 2 : 1 }, function (res) {
                if (res && res.status == 200) {
                    // if (that.isLiked) {
                    //     app.success('点赞成功');
                    // }
                } else {
                    if (res.msg == "已点赞") {
                    } else {
                        app.error(res.msg);
                        // that.isLiked = !that.isLiked;
                    }
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.item-container {
    /* display: inline-flex;
    flex-direction: row;
    width: auto;
    height: auto;
    align-items: flex-start; */
}

.item-wrapper {
    display: inline-block;
    box-sizing: border-box;
    width: 50%;
    padding: 0 10rpx;
}

.item {
    position: relative;
    width: 100%;
    box-sizing: border-box;

    .text {
        margin-top: 20rpx;
        margin-bottom: 30rpx;
        font-size: 28rpx;
        color: #333;
        text-wrap: wrap;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
}

.image-container {
    position: relative;
    width: 100%;
    height: 400rpx;
}

image {
    width: 100%;
    height: 100%;
    display: block;
}

.red-box {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 45rpx;
    height: 45rpx;
}

.red-box image {
    width: 100%;
    height: 100%;
}

.icons {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 20rpx;

    .icon-zhongcao {
        padding: 10rpx;
        font-size: 24rpx;
        color: #000;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 7rpx;
        text-align: center;

        .authorimg {
            width: 100%;
            height: 100%;
        }

        .authorname {
            font-size: 22rpx;
            width: 1rpx;
        }
    }



    .icon-heart {
        display: flex;
        align-items: center;
        text-align: center;


        image {
            width: 40rpx;
            height: 40rpx;
        }

        text {
            margin-left: 10rpx;
            font-size: 24rpx;
            // color: #ff0000;
        }

        .action-item {
            .action-icon {
                width: 36rpx;
                height: 36rpx;
            }
        }
    }
}
</style>